<div [@flyIn]="'active'">
  <div class="wrapper-sm">
    <div class="panel panel-default m-b-n-xs" style="border-radius:5px">
      <div class="panel-body" style="font-size: 10px;padding:5px 20px; " >

        <div class="m-t-xs m-t-sm">
          <span>系统管理</span>
          <i class="fa fa-angle-right"></i>
          <span>产品管理</span>
          <i class="fa fa-angle-right"></i>
          <span>产品列表</span>
        </div>
      </div>
    </div>
  </div>
  <div class="wrapper-sm" style="font-size:12px">
    <div class="panel panel-default" style="border-radius:5px">
      <div class="panel-body">
        <div class="row" >
          <div class="col-lg-6">
            <form class="form-horizontal">
              <div class="form-group">
                <div class="col-lg-9 ">
                  <div class="input-group">
                    <input  [(ngModel)]="keyword" type="text" class="form-control input-sm ng-valid ng-dirty" placeholder="产品型号、类型名称、描述..." name="keyword">
                <span class="input-group-btn">
                  <button class=" btn btn-default btn-sm" type="button">搜索</button>
                </span>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="col-lg-6" [ngStyle]="{display: elc.a}">
            <button (click)="newModal()" class="btn btn-info btn-sm pull-right"  style="margin-right: 10px">新增</button>
          </div>
        </div>
        <table  class="table table-striped table-hover m-b-none "  >
          <thead>
          <tr>
            <th  style="width:20%">产品ID</th>
            <th  style="width:25%">产品名称</th>
            <th  style="width:25%">产品描述</th>
            <th  style="width:25%">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let aaData of data">
            <td>{{aaData.id}}</td>
            <td>{{aaData.name}}</td>
            <td>{{aaData.description}}</td>
            <td>
              <a (click)="editModal(aaData);" [ngStyle]="{display: elc.e}">
                <span tooltip="{{tool.editproTooltip}}" class="glyphicon glyphicon-pencil" style="color: green;margin-right: 10px" ></span>
              </a>

              <a (click)="deleteModal(aaData);" [ngStyle]="{display: elc.d}">
                <span class="glyphicon glyphicon-remove" tooltip="{{tool.delproTooltip}}" style="color: red;margin-right: 10px" ></span></a>

              <a [routerLink]="['device',aaData.id]" [ngStyle]="{display: elc.o}">
                <span  tooltip="{{tool.devlistTooltip}}" class="glyphicon glyphicon-plus" style="color:purple;margin-right: 10px"></span></a>

              <a [routerLink]="['point',aaData.id]" [ngStyle]="{display: elc.p}">
                <span  tooltip="{{tool.prodatapointTooltip}}" class="glyphicon glyphicon-plus" style="color:purple"></span></a>

        

            </td>
          </tr>
          </tbody>
        </table>
        <app-pagination [pageModel]="pageModel" (pageChanged)="page=$event;getData()"></app-pagination>
      </div>
    </div>
  </div>
</div>
<div>
  <div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">
            <p *ngIf="buttonType==1">新增产品</p>
            <p *ngIf="buttonType==2">编辑产品</p>
            <p *ngIf="buttonType==3">删除产品</p>
          </h3>
        </div>
        <div class="modal-body">

          <div class="row">
            <div class="col-sm-10" [style.display]="buttonType!=3?'block':'none'">
              <div class="bs-example form-horizontal">
                <div class="form-group">
                  <label class="col-lg-3 control-label">产品名称</label>
                  <div class="col-lg-7">
                    <input type="text" class="form-control"  [(ngModel)]="model.name" placeholder="请输入产品名称" required="">
                  </div>
                  <div class="col-lg-2" style="color:red;margin-top: 8px;">
                    <p [hidden]="model.name">必填</p>
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-lg-3 control-label">产品品牌</label>
                  <div class="col-lg-7">
                    <input type="text" class="form-control"  [(ngModel)]="model.brand" placeholder="请输入产品品牌">
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-lg-3 control-label">产品监控路径</label>
                  <div class="col-lg-7">
                    <input type="text" class="form-control"  [(ngModel)]="model.monitor_path" placeholder="请输入产品监控路径">
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-lg-3 control-label">设备展示图片</label>
                  <div class="col-lg-7 text-left">
                    <input type="text" class="form-control" id="file_upload" name="file_upload" type="file" multiple="true" >
                    <span id="file_uploaded11"></span>
                    <input type="hidden" class="form-control" id="file_uploaded1" >
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-3 control-label">设备二维码</label>
                  <div class="col-lg-7">
                    <input type="text" class="form-control" id="file_upload1" name="file_upload" type="file" multiple="true" >
                    <span id="file_uploaded21"></span>
                    <input type="hidden" class="form-control" id="file_uploaded2" >
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-lg-3 control-label">描述</label>
                  <div class="col-lg-7">
                <textarea class="form-control"  [(ngModel)]="model.description"  rows="3">
                </textarea>
                  </div>
                </div>


              </div>
            </div>

            <alert *ngIf="buttonType==3" type="danger">
              <h4>确定要删除<strong>{{ model.name }}</strong>吗？<br/><br/>
                如果点击 删除按钮 后，将会把这个群组下所有的设备都删除，以及其相关连的操作都会被删除</h4>
            </alert>

          </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-info" *ngIf="buttonType==1" (click)="confirmNew()" [disabled]="disabled||!model.name">保存</button>
          <button class="btn btn-info" *ngIf="buttonType==2" (click)="confirmEdit()" [disabled]="disabled">保存</button>
          <button class="btn btn-danger" *ngIf="buttonType==3" (click)="confirmDelete()" [disabled]="disabled">删除</button>
          <button class="btn btn-default" (click)="myModal.hide()">取消</button>
        </div>
      </div>

    </div>
  </div>
</div>
